<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FaceBook</title>

	<link rel="stylesheet" href="./css/bootstrap.css">
	<link rel="stylesheet" href="./css/font-awesome.min.css">
	<link rel="stylesheet" href="./css/main.css">

	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>

	<!-- umeditor -->
	<link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="umeditor/umeditor.config.js"></script>
	<script type="text/javascript" src="umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>

</head>
<body>

	<header class="topbar navbar-default navbar-fixed-top row">

		<!-- logo -->
		<a href="" class="col-sm-1 col-md-1" style="text-align:right;padding-right:0.6em;">
			<i class="icon-2x icon-facebook-sign" style="color:white;"></i>
		</a>

		<!-- search -->
		<form class="form-inline col-sm-4 col-md-4 hidden-xs" role="form">
		  <div class="form-group-sm ">
		    <div class="input-group col-sm-12" >
		      <input class="form-control" type="text" placeholder="用户名">
		      <div class="input-group-addon" width="10%"> <i class="icon-search"></i> </div>
		    </div>
		  </div>
		</form>
		
		<!-- list -->
		<ul class="col-sm-5 nav-list col-md-offset-2 hidden-xs" >
			<li style="border-right:1px solid #365089;">
			    <a href="#">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="30px" height="30px">
			    </a>
			    bool
			</li>
			<li>
				<a href="">首页</a>
			</li>
		  <li>
		 	<lable class="icon-large icon-user"></lable>	
		    <!-- <span class="badge">14</span> -->
		  </li>
		  <li>
		 	<lable class="icon-large icon-comments"></lable>	
		  </li>	
		  <li>
		 	<lable class="icon-large icon-globe"></lable>	
		  </li>	
		  <li style="border-left:1px solid #365089;">
		 	<lable class="icon-large icon-lock" style="color:gray;"></lable>	
		  </li>	
	       <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  <span class="caret"></span></a>
	          <ul class="dropdown-menu" role="menu">
	            <li><a href="#">资料</a></li>
	            <li><a href="#">注销</a></li>
	            <li><a href="#">帮助</a></li>
	            <li><a href="#">反馈</a></li>
	          </ul>
	        </li>   		  	  
		</ul>
	
	</header>



	<div class="search-menu navbar-fixed-top row hidden-xs pull-left" style="z-index:100;">
		
		<!-- list -->
		<ul class="col-sm-6" >
			<li>
				<a href="">热门搜索</a>
				<a href="">最新</a>
				<a href="" class="active">用户</a>
				<a href="">照片</a>
				<a href="">视频</a>
			</li> 		  	  
		</ul>
	
	</div>
	
	<br class="visible-sm visible-md visible-lg">
	<br class="visible-sm visible-md visible-lg">

  <!-- main -->
  <div class="container row" style="margin-top:4em;">

  	<!-- left -->
	<ul class="nav nav-pills nav-stacked  col-sm-2 col-md-2 nav-left hidden-xs" style="margin-left:6%;" role="tablist">
	  <li role="presentation" ><a href="#" class="icon-user"> 布尔</a></li>
	  <li role="presentation"><a href="#" class="icon-comments-alt"> 动态消息</a></li>
	  <li role="presentation"><a href="#" class="icon-comment-alt"> Messages</a></li>
	  <li><span>快速访问</span></li>
	  <li role="presentation"><a href="#" class="icon-user-md"> 布尔</a></li>
	  <li><span>发现</span></li>
	  <li role="presentation"><a href="#" class="icon-inbox"> 活动</a></li>
	  <li role="presentation"><a href="#" class="icon-globe"> 公共主页</a></li>
	  <li role="presentation"><a href="#" class="icon-group"> 小组</a></li>
	  <li role="presentation"><a href="#" class="icon-group"> 好友名单</a></li>
	  <li role="presentation"><a href="#" class="icon-tags"> 打招呼</a></li>
	</ul>
	<!-- left -->

	<!-- comment -->
	<div class="col-sm-6 col-md-6 search-list">
		<div class="col-xs-12 col-sm-12 col-md-12">
			<ul class="col-xs-12 col-sm-12 col-md-12">

				<!-- list -->
				<li class="pull-left">					
					<a href="" class="pull-left">
						<img src="./php.jpg" alt="" width="100px" height="100px" >
					</a>	

					<div class="pull-left">
						<a href=""> <strong> PHP</strong> </a> <br>
						<p style="color:#90949C;font-size:12px;">
							所在地：青岛 <br>
							单身 · 男 · 喜欢女性 <br>
							1 位共同好友：唐旭峰 <br>
							曾经就读：Al al-Bayt University <br>
						</p>
					</div>
					
					<!-- 菜单 -->
					<div class="dropdown pull-right" >
			          ••• <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  
			          	<span class="icon-angle-down" style="text-decoration:none;"></span>
			          </a>
			          <ul class="dropdown-menu" role="menu">
			            <li><a href="#"> 发消息</a></li>
			            <li><a href="#" > 照片</a></li>
			            <li><a href="#"> 好友</a></li>
			            <li><a href="#"> 兴趣</a></li>
			          </ul>
			        </div> 
					<!-- 加为好友 -->
					<button type="button" class="btn btn-default btn-sm icon-plus pull-right" >&nbsp;加为好友 </button>
				</li>
				<!-- list -->

				<li class="pull-left">					
					<a href="" class="pull-left">
						<img src="./php.jpg" alt="" width="100px" height="100px" >
					</a>
					
					<div class="pull-left">
						<a href=""> <strong> PHP</strong> </a> <br>
						<p style="color:#90949C;font-size:12px;">
							所在地：青岛 <br>
							单身 · 男 · 喜欢女性 <br>
							1 位共同好友：唐旭峰 <br>
							曾经就读：Al al-Bayt University <br>
						</p>
					</div>
					
					<!-- 菜单 -->
					<div class="dropdown pull-right" >
			          ••• <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  
			          	<span class="icon-angle-down" style="text-decoration:none;"></span>
			          </a>
			          <ul class="dropdown-menu" role="menu">
			            <li><a href="#"> 发消息</a></li>
			            <li><a href="#" > 照片</a></li>
			            <li><a href="#"> 好友</a></li>
			            <li><a href="#"> 兴趣</a></li>
			          </ul>
			        </div> 
					<!-- 加为好友 -->
					<button type="button" class="btn btn-default btn-sm icon-plus pull-right" >&nbsp;加为好友 </button>
				</li>

			</ul>
		</div>		
	</div>
	<!-- comment -->



	<br class="visible-xs">



	<!-- right -->
	<div class="col-sm-3 col-md-3 hidden-xs" style="margin-left:1%;" >
		<div class="right-main">	
			<ul class="nav nav-pills nav-stacked nav-left" role="tablist" style="padding-bottom:1em;">
			  <li><span>可能认识的人</span></li>
			
			<!-- list -->
			  <li role="presentation" class="col-sm-12 col-md-12 col-lg-12"> 
			    <a href="#" class="col-sm-12 col-md-12 col-lg-12">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="50px" height="50px" class="pull-left">
			      <div class="pull-left" style="position:relative;top:-0.5em;padding-left:0.8em;">
				      <lable> <strong> bool </strong> </lable> <br>
				      <lable style="color:#90949C;">3个共同好友</lable>	<br>
				      <button type="button" class="btn btn-default btn-sm icon-plus" >&nbsp;加为好友 </button>
			      </div>
			      <i class="icon-remove pull-right"></i>
			    </a>
			  </li>
			<!-- list -->
			<!-- list -->
			  <li role="presentation" class="col-sm-12 col-md-12 col-lg-12"> 
			    <a href="#" class="col-sm-12 col-md-12 col-lg-12">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="50px" height="50px" class="pull-left">
			      <div class="pull-left" style="position:relative;top:-0.5em;padding-left:0.8em;">
				      <lable> <strong> bool </strong> </lable> <br>
				      <lable style="color:#90949C;">3个共同好友</lable>	<br>
				      <button type="button" class="btn btn-default btn-sm icon-plus" >&nbsp;加为好友 </button>
			      </div>
			      <i class="icon-remove pull-right"></i>
			    </a>
			  </li>
			<!-- list -->

			  			  			  
			</ul>					
		</div>	
	</div>
	<!-- right -->



  </div>
  <!-- main -->




</body>
</html>
